<template>
    <div class="home body">
        <div class="lef">
            <Swiper :group="bannerGroup" />

            <div class="li_header">
                <dl>
                    <dd
                        v-for="(item, index) in header"
                        :key="index"
                        @click="checkChannel(item, true)"
                        :class="icur == item.id ? 'ddactive' : ''"
                        v-show="index < numlis"
                    >
                        <span>{{ item.name }}</span>
                        <img
                            v-show="icur == item.id"
                            src="../assets/img/i_img_right+.png"
                            alt=""
                        />
                    </dd>
                    <dd class="ddactive" v-show="checkvalaa">
                        <span>{{ checkvalaa }}</span>
                        <img src="../assets/img/i_img_right+.png" alt="" />
                    </dd>

                    <dt @click="headermore = !headermore">
                        <img src="../assets/img/i_icon_more.png" alt="" />
                        <span>更多</span>
                    </dt>
                </dl>

                <transition
                    name="custom-classes-transition"
                    enter-active-class="animated fadeInDown"
                    leave-active-class="animated fadeOutUp"
                >
                    <div class="li_headermore" v-show="headermore">
                        <dl>
                            <dd
                                v-for="(item, index) in header"
                                :key="index"
                                @click="checkChannel(item, false)"
                                :class="icur === item.id ? 'ddactive' : ''"
                                v-show="index >= numlis"
                            >
                                <span>{{ item.name }}</span>
                                <img
                                    v-show="icur === item.id"
                                    src="../assets/img/i_img_right+.png"
                                    alt=""
                                />
                            </dd>
                        </dl>
                    </div>
                </transition>
            </div>

            <List :li_type="li_type" :li_id="li_id" :type="'index'" />
        </div>
        <div class="rig">
            <div :class="sliderScroll ? 'aascroll' : ''">
                <Popularity />
                <Special />
                <Active />
                <ShowTab />
                <div id="scrolltoper"></div>
            </div>
        </div>
        <SiderBar />
    </div>
</template>

<script>
import Swiper from '../components/Swiper';
import List from '../components/List';
import Popularity from '../components/Popularity';
import Special from '../components/Special';
import Active from '../components/Active';
import ShowTab from '../components/ShowTab';
import SiderBar from '../components/SiderBar';

import { axiosGet } from '../server/axios';
import { mapState } from 'vuex';
export default {
    name: 'HomeView',
    components: {
        Swiper,
        List,
        Popularity,
        Special,
        Active,
        ShowTab,
        SiderBar,
    },
    computed: {
        ...mapState({
            sliderScroll: (state) => state.sliderScroll,
        }),
    },
    data() {
        return {
            // 首页相关
            numlis: 8,
            checkvalaa: '',
            icur: '',
            header: [
                {
                    id: '',
                    name: '最新',
                },
                {
                    id: 'recommend',
                    name: '推荐',
                },
            ],
            headermore: false,

            // 热榜
            order_by_desc: '',
            hot_head_list: [
                {
                    text: '人气榜',
                    order_by_desc: 'hot_score',
                },
                {
                    text: '评论榜',
                    order_by_desc: 'comment_count',
                },
                {
                    text: '收藏榜',
                    order_by_desc: 'favorite_count',
                },
            ],

            // 状态控制
            is_Hot: false, // 热榜
            is_state: false, // 状态展示
            is_zhuanti: false, // 专题

            bannerGroup: 'article_recommend', // banner类型

            // 列表相关
            li_type: 'channel',
            li_id: '',
        };
    },
    watch: {},
    mounted() {
        //this.getPath();
        this.getChannel();
        document.getElementById('scrolltoper').offsetTop;
    },
    methods: {
        changeChanl() {
            let chanlide = this.$route.query.chanl;
            let indexer = 0;
            let channelaaaname = '';
            if (chanlide) {
                this.icur = chanlide;

                this.li_id = chanlide;

                this.headermore = false;

                this.header.map((item, index) => {
                    if (item.id == chanlide) {
                        indexer = index;
                        channelaaaname = item.name;
                    }
                });

                // console.log();
                // this.$refs.aaaaa[indexer].click();

                if (indexer >= this.numlis) {
                    this.checkvalaa = channelaaaname;
                    this.subjisuan(channelaaaname);
                } else {
                    this.subjisuan();
                    this.checkvalaa = '';
                }
            }
        },
        // 获取频道
        getChannel() {
            axiosGet('api/channels', {}, (res) => {
                console.log(res);
                if (res.code != 'ok') {
                    this.$notify({
                        title: '警告',
                        message: res.msg,
                        type: 'warning',
                    });
                }
                res.data.map((item) => {
                    this.header.push(item);
                });
                this.changeChanl();
                this.subjisuan();
            });
        },
        subjisuan(text) {
            let length = 0;
            let width = 696;
            if (text) {
                width = width - (text.length * 20 + 34);
            }
            for (let index in this.header) {
                length = length + this.header[index].name.length * 20 + 34;
                if (length > width) {
                    this.numlis = index;
                    return false;
                }
            }
        },
        // 切换频道
        checkChannel(item, type) {
            this.icur = item.id;

            this.li_id = item.id;

            this.headermore = false;

            if (!type) {
                this.checkvalaa = item.name;
                this.subjisuan(item.name);
            } else {
                this.checkvalaa = '';
                this.subjisuan();
            }
        },
    },
};
</script>

<style scoped lang="scss">
.home {
    width: 1200px;
    margin: 20px auto 50px;
    overflow: hidden;
}
.lef {
    float: left;
    width: 770px;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;
}
.rig {
    width: 410px;
    float: right;
    overflow: hidden;
    box-shadow: 0 0 8px 4px #f5f5f5;
    margin-bottom: 8px;
}

.aascroll {
    width: 410px;
    overflow: hidden;
    position: fixed;
    bottom: 40px;
    //
}

.li_header {
    margin-top: 10px;
    background: #fafafa;
    border-radius: 4px;
    padding: 0 12px;
    display: flex;
    align-items: flex-end;
    height: 60px;
    position: relative;
    z-index: 500;

    dl {
        font-size: 18px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #262626;
        width: 100%;

        dt {
            width: 74px;
            height: 36px;
            background: rgba(254, 240, 243, 0.8);
            border-radius: 4px;
            color: #e60012;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            float: right;
            cursor: pointer;
        }
    }
    .ddactive {
        background: rgba(254, 240, 243, 0.8);
        border-radius: 4px;
        color: #e60012;
        font-size: 20px;
    }

    dd {
        // margin: 0 20px;
        position: relative;
        cursor: pointer;
        padding: 0 12px;
        margin: 0 5px;
        float: left;
        height: 42px;
        line-height: 42px;

        img {
            position: absolute;
            top: 8px;
            right: 3px;
        }
    }
    .li_headermore {
        background: #fafafa;
        position: absolute;
        left: 0;
        top: 60px;
        width: 100%;
        z-index: 400;
        padding: 0 12px;

        dl {
        }
    }
    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
        }

        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }
    @-webkit-keyframes fadeOutUp {
        0% {
            opacity: 1;
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    }

    @keyframes fadeOutUp {
        0% {
            opacity: 1;
        }

        to {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }
    }

    .fadeOutUp {
        -webkit-animation-name: fadeOutUp;
        animation-name: fadeOutUp;
    }
}

.hot_head {
    height: 60px;
    background: #fafafa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    margin-top: 10px;

    ul {
        width: 100%;
        .hotactive {
            background: #fef0f3;
            font-size: 20px;
            color: #e60012;
        }
        li {
            float: left;
            width: 94px;
            height: 36px;

            opacity: 0.8;
            border-radius: 4px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 15px;
            font-size: 18px;
            font-family: Source Han Sans SC VF;
            font-weight: 400;
            color: #262626;
            cursor: pointer;

            img {
                position: absolute;
                top: 8px;
                right: 3px;
            }
        }
    }
}
</style>
